import './FinanceHome.scss'

import { useRef, useState, useEffect } from 'react'
import { useMount, useRequest, useSize } from 'ahooks'

import { Http } from '../../../Api'
import { ICON } from '../../../Configure/Icon'

import {
    ColumnStyle,
    ColumnConfigA01Template,
    LineStyle,
    LineConfigA01Template,
} from '../../../../Pages/Front/Assets/Template/AssetsCharts'

const ListA01 = [
    { uuid: 1, label: '收入', unit: '万', icon: 'zongtouzi' },
    { uuid: 2, label: '成本', unit: '万', icon: 'wuyechengben' },
    { uuid: 3, label: '毛利', unit: '万', icon: 'IconHoutaiShouyetouzikongjian' },
    { uuid: 4, label: '利润总额', unit: '万', icon: 'niandugongzuo' },
    { uuid: 5, label: '毛利率', unit: '%', icon: 'qunian' },
    { uuid: 6, label: '利润率', unit: '%', icon: 'lishuai' },
]
const chartStyld = {
    Legendfill: '#262626',
    XLine: '#262626',
    XLabel: '#262626',
    XTick: '#262626',
    YColoc: '#262626',
    YGrid: 'rgba(0,0,0,0.35)',
    BarStatus: true,
}

export const FinanceHome = () => {
    const topBox = useRef()
    const topSize = useSize(topBox)
    const btmBox = useRef()
    const btmSize = useSize(btmBox)

    const [DataA01, setDataA01] = useState({ 收入: 0, 成本: 0, 毛利: 0, 利润总额: 0, 毛利率: 0, 利润率: 0 })
    const [DataA02, setDataA02] = useState([])
    const [DataA03, setDataA03] = useState([])
    const [DataA04, setDataA04] = useState([])

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { list, list11, list12, list13 } = res
            setDataA01(list)

            setDataA02(
                list11.reduce((result, { 收入类型, 收入, 成本, 毛利 }) => {
                    const income = { name: '收入', type: 收入类型, value: 收入 || 0 }
                    const cost = { name: '成本', type: 收入类型, value: 成本 || 0 }
                    const profit = { name: '毛利', type: 收入类型, value: 毛利 || 0 }
                    return result.concat(income, cost, profit)
                }, []),
            )
            setDataA03(
                list12.reduce((result, { 收入类型, 收入, 成本, 毛利 }) => {
                    const income = { name: '收入', type: 收入类型, value: 收入 || 0 }
                    const cost = { name: '成本', type: 收入类型, value: 成本 || 0 }
                    const profit = { name: '毛利', type: 收入类型, value: 毛利 || 0 }
                    return result.concat(income, cost, profit)
                }, []),
            )
            setDataA04(
                list13.reduce((result, { 名称, 收入, 成本, 毛利 }) => {
                    const income = { name: '收入', type: 名称, value: 收入 || 0 }
                    const cost = { name: '成本', type: 名称, value: 成本 || 0 }
                    const profit = { name: '毛利', type: 名称, value: 毛利 || 0 }
                    return result.concat(income, cost, profit)
                }, []),
            )
        },
    })

    useMount(() => {
        runAsync({ url: 'getFinanceByOrganization' })
    })

    return (
        <div className="FinanceHome">
            <div className="top">
                <div className="A01">
                    <div className="Title">财务概况</div>
                    <div className="List">
                        {ListA01.map(({ uuid, label, unit, icon }) => (
                            <div key={uuid}>
                                {ICON[icon]}
                                <div>{label}</div>
                                <div>
                                    {DataA01[label]} <span>{unit}</span>{' '}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
                <div className="A02">
                    <div className="Title">集团内统计</div>
                    <div className="List" ref={topBox}>
                        {topSize && (
                            <ColumnConfigA01Template
                                size={topSize}
                                data={DataA02}
                                style={{ ...ColumnStyle, ...chartStyld }}
                            />
                        )}
                    </div>
                </div>
                <div className="A03">
                    <div className="Title">集团外统计</div>
                    <div className="List">
                        {topSize && (
                            <ColumnConfigA01Template
                                size={topSize}
                                data={DataA03}
                                style={{ ...ColumnStyle, ...chartStyld }}
                            />
                        )}
                    </div>
                </div>
            </div>
            <div className="btm">
                <div className="Title">集团外统计</div>
                <div className="List" ref={btmBox}>
                    {btmSize && (
                        <ColumnConfigA01Template
                            size={btmSize}
                            data={DataA04}
                            style={{ ...ColumnStyle, ...chartStyld }}
                        />
                    )}
                </div>
            </div>
        </div>
    )
}
